<template>
  <transition name="alert-fade">
    <div 
      v-if="visible" 
      class="alert" 
      :class="[
        `alert--${type}`,
        `alert--${size}`,
        { 'alert--with-icon': showIcon },
        { 'alert--closable': closable }
      ]"
      role="alert"
      :aria-live="type === 'error' ? 'assertive' : 'polite'"
    >
      <div class="alert-content">
        <div v-if="showIcon" class="alert-icon">
          <slot name="icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path 
                v-if="type === 'success'" 
                d="M22 11.08V12C21.9988 14.1512 21.3005 16.2333 20.029 17.8747C18.7574 19.5162 16.9952 20.6104 15.064 20.9567C13.1328 21.303 11.1608 20.8784 9.49949 19.7587C7.83813 18.6391 6.59264 16.8952 5.986 15" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
              <path 
                v-if="type === 'success'" 
                d="M22 4L12 14.01L9 11.01" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
              <circle 
                v-if="type === 'info'" 
                cx="12" 
                cy="12" 
                r="10" 
                stroke="currentColor" 
                stroke-width="2"
              />
              <line 
                v-if="type === 'info'" 
                x1="12" 
                y1="8" 
                x2="12" 
                y2="12" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round"
              />
              <line 
                v-if="type === 'info'" 
                x1="12" 
                y1="16" 
                x2="12.01" 
                y2="16" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round"
              />
              <path 
                v-if="type === 'warning'" 
                d="M10.29 3.86L1.82 18C1.65222 18.2912 1.58943 18.6302 1.65069 18.9592C1.71195 19.2883 1.89033 19.582 2.146 19.774C2.40167 19.966 2.71413 20.0409 3.015 20H20.985C21.2859 20.0409 21.5983 19.966 21.854 19.774C22.1097 19.582 22.2881 19.2883 22.3493 18.9592C22.4106 18.6302 22.3478 18.2912 22.18 18L13.71 3.86C13.5347 3.56809 13.2692 3.33979 12.9542 3.20884C12.6396 3.07789 12.2946 3.0519 11.97 3.135C11.6454 3.2181 11.3586 3.4057 11.153 3.66961C10.9474 3.93352 10.8344 4.25909 10.83 4.595L10.29 3.86Z" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
              <line 
                v-if="type === 'warning'" 
                x1="12" 
                y1="9" 
                x2="12" 
                y2="13" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round"
              />
              <line 
                v-if="type === 'warning'" 
                x1="12" 
                y1="17" 
                x2="12.01" 
                y2="17" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round"
              />
              <path 
                v-if="type === 'error'" 
                d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
              <line 
                v-if="type === 'error'" 
                x1="15" 
                y1="9" 
                x2="9" 
                y2="15" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
              <line 
                v-if="type === 'error'" 
                x1="9" 
                y1="9" 
                x2="15" 
                y2="15" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
            </svg>
          </slot>
        </div>
        <div class="alert-message">
          <slot></slot>
        </div>
        <button 
          v-if="closable" 
          class="alert-close" 
          @click="close"
          :aria-label="closeAriaLabel"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['success', 'info', 'warning', 'error'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  closable: {
    type: Boolean,
    default: false
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  closeAriaLabel: {
    type: String,
    default: '关闭警告'
  },
  duration: {
    type: Number,
    default: 0 // 0 表示不自动关闭
  }
})

const emit = defineEmits(['update:visible', 'close'])

const close = () => {
  emit('update:visible', false)
  emit('close')
}

// 自动关闭功能
watch(() => props.visible, (newVal) => {
  if (newVal && props.duration > 0) {
    setTimeout(() => {
      close()
    }, props.duration)
  }
})
</script>

<style scoped>
.alert {
  border-radius: 8px;
  padding: 0;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.alert-content {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
}

.alert--success {
  background-color: #f6ffed;
  border-color: #b7eb8f;
}

.alert--info {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

.alert--warning {
  background-color: #fffbe6;
  border-color: #ffe58f;
}

.alert--error {
  background-color: #fff2f0;
  border-color: #ffccc7;
}

.alert--small {
  font-size: 0.875rem;
}

.alert--medium {
  font-size: 1rem;
}

.alert--large {
  font-size: 1.125rem;
}

.alert-icon {
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.alert--success .alert-icon {
  color: #52c41a;
}

.alert--info .alert-icon {
  color: #1890ff;
}

.alert--warning .alert-icon {
  color: #faad14;
}

.alert--error .alert-icon {
  color: #ff4d4f;
}

.alert-message {
  flex: 1;
  line-height: 1.5;
}

.alert-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.75rem;
  border-radius: 4px;
  color: #666;
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-self: flex-start;
}

.alert-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
}

.alert-fade-enter-active,
.alert-fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.alert-fade-enter-from,
.alert-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-content {
    padding: 0.75rem;
  }
  
  .alert-icon {
    margin-right: 0.5rem;
  }
  
  .alert-close {
    margin-left: 0.5rem;
  }
}
</style>